<template>
  <div>
    <div
      class="addressSelect"
      v-if="null != selectedAddress.id"
      @click="emits('selectAddress')"
    >
      <div class="info">
        <div class="account">
          <nut-tag v-if="selectedAddress.defaultAddressFlag" type="danger"
            >默认</nut-tag
          >
          <span class="name">{{ selectedAddress.name }}</span>
          <span class="phone">{{ selectedAddress.phone }}</span>
        </div>
        <span class="detail">{{ selectedAddress.fullAddress }}</span>
      </div>
      <RectRight />
    </div>
    <div
      v-if="null == selectedAddress.id"
      class="addressSelect"
      @click="emits('selectAddress')"
    >
      <div class="emptyInfo">
        请选择收货地址
      </div>
      <RectRight />
    </div>
  </div>
</template>

<script setup>
import { RectRight } from "@nutui/icons-vue";
import { defineProps, defineEmits } from "vue";

// 属性
const props = defineProps({
  selectedAddress: {
    type: Object,
  },
  hasRight: {
    type: Boolean,
  },
  replaceUrl: {
    type: String,
  },
});

// 方法
const emits = defineEmits(["selectAddress"]);
</script>

<style lang="less" scoped>
.addressSelect {
  margin: 0px 5px;
  margin-top: 5px;
  background: #fff;
  border-radius: 5px;
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .emptyInfo {
    height: 40px;
    line-height: 40px;
  }
  .info {
    display: flex;
    flex-direction: column;
    .nut-tag {
      margin-right: 10px;
    }
    .account {
      .name {
        margin-right: 10px;
      }
      .phone {
      }
    }
    .detail {
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
</style>